<template>
	<view class="brand mainbgc">
		<!-- 自定义头部 -->
		<view class="header-top-box">
			<view class="header-top ffffff flexbetween">
				<view class="top-image" @click="gotoBack()"></view>
				<view class="searchinput flexleft">
					<view class="searchimg"></view>
					<input type="text" placeholder="请输入内容" v-model='keyword'>
				</view>
				<view class="nostrongtext" @click="getyglist()">搜索</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="mainpadding">
			<view class="mainpadding box margin_top ffffff  radius"  v-for="(item,index) in list" :key="index" @click="selectitem(item)">
				<view class="flexleft">
					<view class="strongtext">{{item.name}} 1827382727</view>
					<view class="girl margin_left2"></view>
					<!-- <view class="boy margin_left2"></view> -->
				</view>
				<view class="margin_top2 flexleft">
					<view class="huisetext margin_right">职位：主管</view>
					<view class="huisetext">部门：财务部</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="huisetext">拜访：
						<text class="lvsetext">{{item.visit}}</text>
					</view>
					<view class="huisetext">异常未拜访：
						<text class="honhsetext">{{item.abnormal}}</text>
					</view>
					<view class="huisetext">近期未拜访：
						<text class="honhsetext">{{item.unvisit}}</text>
					</view>
				</view>
				<view class="yewuyuanbox">
					<view class="yewuyuan">财务部</view>
					<!-- <view class="songhuoyuan">送货员</view> -->
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keyword:"",
				list:[
					{
						id: 4,
						name: "",
						avatar: "",
						group: 2,
						visit: 0,
						abnormal: 0,
						unvisit: 0,
						track_list: [],
						visit_list: [],
						abnormal_list: [],
						unvisit_list: []
					},
				]
			}
		},
		onLoad() {
			this.getyglist()
		},
		methods: {
			// 获取员工列表
			getyglist(){
				httpRequest.request('appapi/manage/staff/track', 'POST', {
					keyword:this.keyword
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				}).catch(err => {
					// httpRequest.toast(err.msg);
				})
			},
			selectitem(item){
				uni.$emit("jieshou",item)
				uni.navigateBack(1)
			},
			gotoBack(){
				uni.navigateBack(1)
			}
		}
	}
</script>
<style lang="scss" scoped>
	
	
	.box{
		position: relative;
	}
	.yewuyuanbox{
		position: absolute;
		right: 0;
		top: 0;
	}
	.yewuyuan{
		width: 110rpx;
		height: 42rpx;
		background: rgba(11, 189, 203, .1);
		border-radius: 0 16rpx 0 16rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}
	.songhuoyuan{
		width: 110rpx;
		height: 42rpx;
		background: rgba(255, 242, 234, 1);
		border-radius: 0 16rpx 0 16rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF6B00;
	}
	.touxiang{
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.lvsetext{
		color: #66e7b4;
	}
	.honhsetext{
		color: #FF0000;
	}
	.huisetext{
		margin-right: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>
<style lang="scss" scoped>
	// 顶部自定义
	.header-top-box {
		height: 170rpx;
		width: 100%;
	}
	.header-top {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		background-color: #fff;
		padding: 96rpx 40rpx 10rpx;
	}
	.top-image {
		margin-top: 20rpx;
		width: 20rpx;
		height: 38rpx;
		background: url('@/static/image/system/return.png') no-repeat;
		background-size: 20rpx 38rpx;
	}
	// 自定义顶部搜索
	.searchinput {
		margin-top: 20rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		padding: 12rpx 20rpx;
	
		input {
			width: 100%;
		}
	}
	.searchimg {
		width: 34rpx;
		height: 34rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
		margin-right: 30rpx;
	}
	.phonenum{
		margin-left: 30rpx;
		font-size: 28rpx;
	}
</style>
